// 获取商品id 调用接口 显示商品
var urlStr = location.search;
// console.log(urlStr);
let seprObj = new URLSearchParams(urlStr);
let id = seprObj.get("id");
console.log(id);

//调用商品接口,找到当前商品信息
// 接口地址：http://jx.xuzhixiang.top/ap/api/detail.php

let detailAPI = 'http://jx.xuzhixiang.top/ap/api/detail.php';
axios.get(detailAPI, { params: { id } }).then(r => {
    console.log(r);
    var itemArr = r.data.data;
    console.log(itemArr);
    // 显示到页面
    let str = `
        <!-- 图片部分 -->
        <div class="itemimg">
            <div class="imgcon">
                <img src="${itemArr.pimg}" alt="">
            </div>
            <div class="imgcon">
                <img src="${itemArr.pimg}" alt="">
            </div>
            <div class="imgcon">
                <img src="${itemArr.pimg}" alt="">
            </div>
            <div class="imgcon">
                <img src="${itemArr.pimg}" alt="">
            </div>
        </div>

        <!-- 详情部分 -->
        <div class="detail">
            <div class="proname">
                <h3>女装廓形西装外套</h3>
                <p class="price">
                    ${itemArr.pprice}
                </p>
                <p class="c-gray">WVE2S1CE2000</p>
                <p class="c-gray">面料：68%聚酯纤维 30%粘纤 2%氨纶
                    里料：96%聚酯纤维 4%氨纶</p>
                <p class="c-gray">双排扣设计，利落翻驳领，时尚气质</p>
            </div>
            <!-- 参与活动 -->
            <div class="active">
                <h5>此商品参与：</h5>
                <div class="actdes">
                    <p>优惠券抵扣</p>
                    <p>新客首单95折</p>
                    <p>满199包邮</p>
                </div>
            </div>
            <!-- 商品颜色 -->
            <div class="procolor">
                <h5>颜色:</h5>
                <div class="proimg">
                    <img src="${itemArr.pimg}" alt="">
                </div>
            </div>
            <!-- 选择尺码 -->
            <div class="prosize">
                <h5>
                    选择尺码:
                    <a href="javascript:;">查看尺码对照表</a>
                </h5>
                <ul class="size">
                    <li>XS(160/80A)</li>
                    <li>S(165/84A)</li>
                    <li>M(170/88A)</li>
                    <li>L(170/92A)</li>
                    <li>XL(175/96A)</li>
                </ul>
            </div>
            <!-- 数量加购物车 -->
            <div class="procar">
                <h5>数量</h5>
                <div class="pronum">
                    <a href="javascript:;" class="sub" onclick="subPnum()">-</a>
                    <span class="pnum">1</span>
                    <a href="javascript:;" class="add" onclick="addPnum()">+</a>
                </div>
                <a href="javascript:;" class="buybtn">立即购买</a>
                <a href="javascript:;" class="carbtn" onclick="addCar(${itemArr.pid})">加入购物袋</a>
                <a href="javascript:;" class="collbtn">收藏</a>
                <p>发货时间：2-7个工作日
                    <br>
                    物流通知：由于发货升级，如您的购买了两件以上产品有可能分包裹发货，请知悉，谢谢。</p>
            </div>

            <!-- 说明 -->
            <div class="explain">
                <div class="expitem">
                    <h5>洗涤说明&nbsp;&nbsp;+</h5>
                    <p class="c-gray" >建议深浅颜色分开洗涤，洗涤温度不高于30度，常规程序，不可漂白，通风处自然晾干，不宜长时间浸泡以及暴晒，烫斗底板温度不高于110度。</p>
                </div>
                <div class="expitem">
                    <h5>价格说明&nbsp;&nbsp;+</h5>
                    <p class="c-gray" >建议深浅颜色分开洗涤，洗涤温度不高于30度，常规程序，不可漂白，通风处自然晾干，不宜长时间浸泡以及暴晒，烫斗底板温度不高于110度。</p>
                </div>
                <div class="expitem">
                    <h5>退货换货说明&nbsp;&nbsp;+</h5>
                    <p class="c-gray" >建议深浅颜色分开洗涤，洗涤温度不高于30度，常规程序，不可漂白，通风处自然晾干，不宜长时间浸泡以及暴晒，烫斗底板温度不高于110度。</p>
                </div>
                <div class="expitem">
                    <h5>查看其他门店库存情况</h5>
                    <p class="c-gray" >建议深浅颜色分开洗涤，洗涤温度不高于30度，常规程序，不可漂白，通风处自然晾干，不宜长时间浸泡以及暴晒，烫斗底板温度不高于110度。</p>
                </div>
            </div>
        </div>
        `;
    let itemwrap = document.querySelector(".itemwrap");
    itemwrap.innerHTML = str;
});

// 点击加入购物车 调用购物车接口

// 接口地址：http://jx.xuzhixiang.top/ap/api/add-product.php

//用户id 
let uid = localStorage.getItem('uid');
console.log(uid);

function addCar(pid) {
    // console.log(pid);
    if(uid === null){
        alert("请先登录");
        return;
    }
    let addCarAPI = 'http://jx.xuzhixiang.top/ap/api/add-product.php';
    //获取pnum
    let pnum = document.querySelector(".procar .pnum").innerText;
    // console.log(pnum);

    if (uid) {
        // 发请求 
        axios.get(addCarAPI, { params: { uid, pid, pnum } }).then(r => {
            console.log(r);
            //    加入成功
            alert(r.data.msg);
            //    if(r.data.msg)
            location.href = './carList.html';
        })
    }

}

// 点击减号
function subPnum(){
    let pnumele = document.querySelector(".procar .pnum");
    let pnum = document.querySelector(".procar .pnum").innerText;
    pnum--;
    if(pnum<1){
        alert("商品数量不能小于1");
        return;
    }
    pnumele.innerText = pnum;
}

// 点击加号
function addPnum(){
    let pnumele = document.querySelector(".procar .pnum");
    let pnum = document.querySelector(".procar .pnum").innerText;
    pnum++;
    if(pnum>=10){
        alert("商品数量不能大于10");
        return;
    }
    pnumele.innerText = pnum;
}